<template>
  <div id="forget">
    <section class="sm_f">
      <!-- 手机号 -->
      <div class="border">
        <span>手机号</span>
        <input type="tel" class="sm_f" v-model="phone" placeholder="输入手机号码">
        <div :class="{'invalid': isInvalid || isGettingCode, 'legal': !isInvalid && !isGettingCode}" v-tap="{methods:getCode}">{{message}}</div>
      </div>
      <!-- 验证码 -->
      <div class="border">
        <span>验证码</span>
        <input type="tel" class="sm_f" placeholder="输入验证码" v-model="code">
      </div>
    </section>
    <!-- button -->
    <div class="draw_btn login-btn" v-tap="{methods: next}">
      <div>下一步</div>
    </div>
  </div>
</template>

<script>
// obj
import Vue from "vue";
// service
import { SendValidateCode } from "services/share/forgetPassword";

export default {
  data() {
    return {
      isInvalid: true, // 手机号码是否合法, 合法则获取验证码
      phone: null, // 手机号
      message: "获取验证码",
      isforget: false,
      code: null, // 输入的验证码
      serCode: "", // 从服务器获取的验证码
      isGettingCode: false // 是否正在获取验证码
    };
  },
  methods: {
    // 获取验证码
    getCode() {
      if (!this.isInvalid && !this.isGettingCode) {
        this.isInvalid = true;
        this.isforget = true;
        this.isGettingCode = true;
        // 获取验证码
        SendValidateCode.bind(this)(
          {
            phoneNumber: this.phone,
            type: "1"
          },
          res => {
            // resultCode 100-获取到验证码
            this.serCode = res.validateCode;
            let time = 60;
            let countDown = setInterval(() => {
              this.message = "重新发送" + time;
              time--;
              if (time === 0) {
                clearInterval(countDown);
                this.isInvalid = false;
                this.isGettingCode = false;
                this.message = "获取验证码";
              }
            }, 1000);
          },
          (err, code) => {
            this.$.toast(err);
            this.isGettingCode = false;
          }
        );
      } else {
        console.log("不能点");
      }
    },
    // 下一步
    next() {
      if (this.paramValid()) {
        this.$router.push({
          name: "forget_password_step2",
          query: {
            phone: this.phone
          }
        });
      }
    },
    // 页面参数校验
    paramValid() {
      // 手机号码是否合法
      let result = true;
      if (null == this.phone || "" == this.phone) {
        this.$.toast("手机号码为空");
        result = false;
      } else if (null == this.code || "" == this.code) {
        this.$.toast("验证码为空");
        result = false;
      } else if (!/^1[3|4|5|7|8]\d{9}$/.test(this.phone)) {
        this.$.toast("请输入合法的手机号码");
        result = false;
      } else if (this.serCode != this.code) {
        this.$.toast("验证码错误, 请重新输入");
        result = false;
      }
      return result;
    }
  },
  watch: {
    phone: function() {
      if (!/^1[3|4|5|7|8]\d{9}$/.test(this.phone)) {
        this.isInvalid = true;
      } else {
        this.isInvalid = false;
      }
    }
  }
};
</script>

<style>
#forget {
  padding: 1em;
  background-color: #ececec;
  position: relative;
  height: 100vh;
}
#forget input {
  flex: 1;
  padding: 0px 8px;
  outline: none;
  border: none;
}
#forget input:focus {
  outline: none;
}
#forget .border {
  display: flex;
  align-items: center;
  padding: 6px;
  background: #fff;
  margin-bottom: 1em;
}
#forget .tel {
  width: 20px;
  height: 100%;
}
#forget .draw_btn {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background: #f98700;
  margin-bottom: 1em;
  border-radius: 5px;
}
#forget .invalid {
  padding: 8px;
  border: none;
  color: #929292;
  background-color: #ececec;
  border-radius: 4px;
}
#forget .legal {
  padding: 8px;
  border: none;
  background-color: #f98700;
  color: #fff;
  border-radius: 4px;
}
</style>